import React, { memo,useState ,useCallback} from 'react'
import { shallowEqual, useDispatch, useSelector, } from 'react-redux'
import { CSSTransition } from 'react-transition-group'
import { DownloadOutlined, UndoOutlined } from '@ant-design/icons'
import {  Tooltip } from 'antd'

import { getPlayUrl } from '@/utils/format-utils.js'
import {  OperatorWrapper } from './style'
import SliderPlayList from '../slider-playlist'
import {
  changePlaySequenceAction
} from 'pages/player/store/actionCreator'



function Operator(){
  const [isShowSlide, setIsShowSlide] = useState(false) // 是否显示播放列表
  // redux hook
  const dispatch = useDispatch()
  const {
    currentSong,
    playListCount,
    playSequence
  } = useSelector(
    (state) => ({
      currentSong: state.getIn(['player', 'currentSong']),
      playListCount:state.getIn(['player','playListCount']),
      playSequence: state.getIn(['player', 'playSequence'])
    }),
    shallowEqual
  )

  const songUrl = getPlayUrl(currentSong.id) // 歌曲URL

  // 更改播放顺序
  const changeSequence = () => {
    let currentSequence = playSequence
    currentSequence++
    if (currentSequence > 2) {
      currentSequence = 0
    }
    dispatch(changePlaySequenceAction(currentSequence))
  }

  // 改变播放列表是否显示
  const changePlaylistShow = useCallback(() => {
    setIsShowSlide(!isShowSlide)
  }, [isShowSlide])

  return(
    <OperatorWrapper>
       <div className="left">
         
         <Tooltip title="下载音乐">
          <a
            download={currentSong && currentSong.name}
            target="_blank"
            rel="noopener noreferrer"
            href={songUrl}
          >
            <DownloadOutlined />
          </a>
         </Tooltip>

          <Tooltip title="重新播放">
            <UndoOutlined className="refresh"  />
          </Tooltip>

       </div>
       <div className="right sprite_player">
         
        <button
          className="sprite_player btn volume"
        ></button>

          <Tooltip
              title={[
                '顺序播放',
                '随机播放',
                '单曲循环',
              ].filter((item, index) =>
                index === playSequence ? item : undefined
              )}
            >
              <button
                className="sprite_player btn loop"
                onClick={(e) => changeSequence()}
              ></button>
            </Tooltip>

        <button
          className="sprite_player btn playlist"
          onClick={ (e) => setIsShowSlide(!isShowSlide)}
        >
          <Tooltip title="播放列表">
            <span>{playListCount}</span>
          </Tooltip>
          <CSSTransition
            in={isShowSlide}
            timeout={ 3000 }
            classNames='playlist'
          >
            <SliderPlayList
              isShowSlide={isShowSlide} 
              playlistCount={playListCount}
              closeWindow={changePlaylistShow}>
            </SliderPlayList>
          </CSSTransition>

		  </button>   
       
       </div>
    </OperatorWrapper>
  )
}

export default memo(Operator)
